<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>教师管理</title>
    <script type="text/javascript" src="../static/jquery-easyui-1.5.5/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/jquery-easyui-1.5.5/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../static/jquery-easyui-1.5.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../static/toastr/toastr.min.css">
    <script type="text/javascript" src="../static/jquery-easyui-1.5.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../static/jquery-easyui-1.5.5/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../static/js/book/manage.js"></script>
    <script type="text/javascript" src="../static/js/custom.js"></script>
    <script type="text/javascript" src="../static/toastr/toastr.min.js"></script>
    <script type="text/javascript" src="../static/js/validate.js"></script>
</head>
<body style="margin: 0; padding: 10px;">
<script type="text/javascript">
    /* 计算窗口高度  */
    var h = document.documentElement.clientHeight || document.body.clientHeight;

    console.log(h);
    $(function() {
        $('#xtable').datagrid({
            /* 标题文字 */
            title: '教师管理',
             /* 指明哪一个字段是标识字段 */
            idField: 'id',
            /* 是否显示斑马线效果 */
            striped: true,
            /* 在从远程站点加载数据的时候显示提示消息 */
            loadMsg: '正在加载数据',
            /* 一个URL从远程站点请求数据 */
            url: 'list.do',
            /* 如果为true，则在DataGrid控件底部显示分页工具栏 */
            pagination: true,
            /* 如果为true，则显示一个行号列 */
            rownumbers: true,
            /* 如果为true，则只允许选择一行 */
            singleSelect: true,
            /* 使列自动展开/收缩到合适的DataGrid宽度 */
            fitColumns: true,
            /* fit: true, */
            height: h-29,
            method: 'POST',
            pageSize: 10,
            pageList: [5,10,25,50,100],
            sortName: 'id',
            sortOrder: 'asc',
            /* 冻结列  */
            frozenColumns: [ [
                {field: 'username', title: '用户名', width: 150}
            ] ],
            columns: [ [
                {field: 'id', title: 'ID', sortable:true, order: 'asc', hidden: true},
                /* {field: 'isbn', title: 'ISBN', width: 130}, */
                {field: 'name', title: '名字', width: 100},
                {field: 'email', title: '邮箱', width: 120, hidden: true},
                {field: 'phone', title: '联系电话', width: 120}
            ] ],
            dialog:{
                create: {
                    title : '新增老师' ,
                    width : 330
                },
                update: {
                    title: '修改信息',
                    width: 330
                },
                search: {
                	width: 330
                }
            } ,
            toolbar: [$.crudgrid.buttons.create, '-', 
                $.crudgrid.buttons.update, '-',
                $.crudgrid.buttons.delete, '-',
                $.crudgrid.buttons.search, '-',
                $.crudgrid.buttons.reload]

        });
    });
</script>
<table id="xtable">

</table>
</body>
</html>